<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        :to="{ path: item.path }"
        v-for="(item, index) in breadList"
        :key="index"
        >{{ item.meta.title }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadList: [] // 路由集合
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    isHome(route) {
      return route.name === 'Home'
    },
    getBreadcrumb() {
      const matched = this.$route.matched
      // if (!this.isHome(matched[0])) {
      //   matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
      // }
      this.breadList = matched
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  padding: 24px;
  font-weight: 400;
  margin-bottom: 15px;
}
</style>
